<script setup lang="ts">
import { onMounted, ref, getCurrentInstance } from 'vue'
import { getAll, getTyphoonData } from '@/api'
import { defaultMapStore } from '@/store'
import Map from 'ol/Map'
import { Layer } from 'ol/layer'

interface TableData {
  identifier: String,
  chineseName: String,
  englishName: String,
  checked: boolean
}
const value = ref(2023)
const options = [2023, 2021, 2020, 2019, 2018]
const tableData = ref([])
const { proxy }: any = getCurrentInstance()
let historyActive = defaultMapStore().getActive()

onMounted(() => {
  getAllTyphoon(value.value)
})
const getAllTyphoon = (year: number) => {
  tableData.value = []
  getAll(year).then((res: any) => {
    const data = res.data.data
    data.forEach(item => {
      tableData.value.push(
        {
          identifier: item.ident,
          chineseName: item.name,
          englishName: item.ename,
          checked: false
        }
      )
    })
  })
}
const changeTyphoon = (row) => {
  const map: Map = defaultMapStore().getMap()
  row.checked = !row.checked
  if (row.checked) {
    getTyphoonData(row.identifier).then((res: any) => {
      const data = res.data.data
      console.log(data);

      const typhoon = new proxy.$typhoon(map, data)
      console.log(typhoon)
    })
  } else {
    map.getAllLayers().forEach((layer: Layer) => {
      if (layer.get('name') === '台风路径') {
        map.removeLayer(layer)
      }
    })
  }
}
</script>

<template>
  <transition name="typhoonList">
    <view class="typhoon-list" v-show="historyActive">
      <view class="close_list">
        <text class="list_tips">台风列表</text>
        <el-icon class="close_icon" @click="historyActive = false">
          <Close />
        </el-icon>
      </view>
      <view class="typhoon_list_data">
        <view class="year_select_view">
          <text class="year_title_text">年份:</text>
          <el-select v-model="value" class="m-2" size="large">
            <el-option v-for="item in options" :key="item" :value="item" @click="getAllTyphoon(value)" />
          </el-select>
        </view>
        <el-table :data="tableData" stripe style="width: 100%" max-height="300">
          <el-table-column prop="selectTyphoon" width="150">
            <template #default="scope">
              <el-checkbox size="large" :checked="scope.row.checked" @click="changeTyphoon(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="identifier" label="编号" width="220" />
          <el-table-column prop="chineseName" label="中文名" />
          <el-table-column prop="englishName" label="英文名" />
        </el-table>
      </view>
    </view>
  </transition>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

.typhoon-list {
  position: fixed;
  bottom: 0;
  height: 9rem;
  background-color: #fff;
  z-index: 1001;
  width: 100%;
  box-shadow: 1px 1px 0.02rem 1px #aaa;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  transform-origin: bottom;
  transition: transform .6s;

  &.typhoonList-enter-active {
    transform: scaleY(1);
  }

  &.typhoonList-enter-from,
  &.typhoonList-leave-active {
    transform: scaleY(0);
  }

  .close_list {
    position: relative;
    color: #1784ff;
    height: 15%;
    font-size: 0.6rem;

    .list_tips {
      @include positionTopLeft(absolute, 15%, 50%);
      transform: translateX(-50%);
      vertical-align: middle;
    }

    .el-icon {
      @include positionTopRight(absolute, 15%, 1%);
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
    }
  }

  .typhoon_list_data {
    .year_select_view {
      .year_title_text {
        color: #000;
        font-size: 0.4rem;
        font-weight: 700;
        margin: 0 0.5rem;
      }

      .el-select {
        width: 4.45rem;
        height: 0.926rem;
      }
    }

    .el-table .el-table__header-wrapper {
      margin-right: 0.18rem;

      thead tr {
        font-size: 0.45rem;
        height: 0.926rem;
        color: #000;

        th {
          background-color: #ebf6ff;
          text-align: center;
        }
      }
    }

    .el-table .el-table__body-wrapper tr {
      font-size: 0.407rem;
      color: #000;
      height: 1.111rem;

      td {
        text-align: center;
      }
    }
  }
}

.typhoon-name {
  background-color: #fff;
  opacity: 0.8;
  border-radius: 0.074rem;
  padding: 0 0.0926rem;
  font-size: 0.2222rem;
  user-select: none;

  &::before {
    content: '';
    @include positionTopLeft(absolute, 0.037rem, -0.2037rem);
    position: absolute;
    border: 0.1111rem solid transparent;
    border-right-color: white;
  }
}

.popup {
  position: relative;
  @include wHbgc(7rem, 3.5rem);
  border-radius: 0.2222rem;

  .typhoon-time {
    @include wHbgc(100%, 22%, #0081ff);
    padding: 0.1852rem 0.1852rem;
    border-top-left-radius: 0.22222rem;
    border-top-right-radius: 0.22222rem;
    margin-bottom: 0.2778rem;
    color: #fff;
    font-size: 0.2407rem;
    font-weight: 700;
  }

  .popup-closer {
    position: absolute;
    top: 3%;
    right: 3%;
    font-size: 0.37037rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
  }

  .popup-content {
    view {
      font-size: 0.2222rem;
      padding-bottom: 0.09259rem;
      margin-bottom: 0.09259rem;
      border-bottom: 1px dashed #c8c8c8;

      text:first-child {
        display: inline-block;
        color: #006ed9;
        font-weight: 700;
        margin-left: 0.01852rem;
      }

      text:last-child {
        display: inline-block;
        margin-left: 0.55556rem;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
